<template>
  <ArtSearchBar ref="searchBarRef" v-model="formData" :items="formItems" :rules="rules" @reset="handleReset"
    @search="handleSearch" />
</template>

<script setup lang="ts">
interface Props {
  modelValue: Record<string, any>
}
interface Emits {
  (e: 'update:modelValue', value: Record<string, any>): void
  (e: 'search', params: Record<string, any>): void
  (e: 'reset'): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 双向绑定
const searchBarRef = ref()
const formData = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

// 校验规则（可按需扩展）
const rules = {}

// 表单配置
const formItems = [
  {
    label: '规则名称',
    prop: 'name',
    type: 'input',
    placeholder: '请输入规则名称'
  },
  {
    label: '条件类型',
    prop: 'condition_type',
    type: 'select',
    placeholder: '请选择条件类型',
    options: [
      { label: '等于', value: 'eq' },
      { label: '包含', value: 'in' },
      { label: '模糊匹配', value: 'like' },
      { label: '范围', value: 'between' }
    ]
  },
  {
    label: '状态',
    prop: 'status',
    type: 'select',
    placeholder: '请选择状态',
    options: [
      { label: '启用', value: true },
      { label: '禁用', value: false }
    ]
  },
  {
    label: '关键词',
    prop: 'keyword',
    type: 'input',
    placeholder: '请输入关键词'
  }
]

// 事件
function handleReset() {
  emit('reset')
}

async function handleSearch() {
  emit('search', formData.value)
}
</script>

<style lang="scss" scoped></style>